<template>
  <div class="footer">
    <div class="container">
      <div class="service">
        <div class="service-left">
          <div class="footer-logo">
            <div class="logo">
              <img class="logo-img" src="@/assets/images/logo/logo_footer.png" alt="" />
            </div>
          </div>
          <div class="service-type" v-for="(item, key) of dataList" :key="key">
            <div class="title ff-bold">{{ $t("footer." + key) }}</div>
            <div class="text ff-regular" v-for="(i, index) in item" :key="index">
              <a class="text" :href="'/notice/' + i.id" target="_blank">{{ i.title }}</a>
            </div>
          </div>
        </div>
        <div class="service-right"></div>
      </div>

      <div class="divline"></div>

      <div class="company-info">
        <div class="left">
          <p v-if="false">{{ $t("footer.companyName") }}： Autopia Mobile Tech HK Holdings Limited & Openbuy Technology
            HK
            Limited</p>
          <p>
            {{ $t("footer.hongkongOffice") }}：Suite 603,6/F,Laws commercial plaza,788 Cheung sha wan road KL
          </p>
          <!-- <p>
          {{ $t("footer.USAOffice") }}：42514 ALBRAE ST FREMONT, CA 94538, USA
        </p> -->
        </div>
        <div class="right">
          <img class="pay-list" src="@/assets/images/public/pay-list.png" alt="" />

        </div>
      </div>
      <div class="privacy-info" v-if="false">
        <a class="text ff-regular" v-for="item in aboutList" :key="item.id" :href="item.url" target="_blank">{{
          item.title
        }}</a>
        <!--          <router-link v-for="item in aboutList" :key="item.id" class="text" :to="`/notice/${item.id}`">{{item.title}}</router-link>-->
      </div>

      <div v-if="false" class="copyright">
        Copyright © 2017-2024 100buy.com All Rights Reserved
        <a class="url" target="_blank" href="https://beian.miit.gov.cn">闽ICP备2024036227号-1</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { contentList } from "@/api/content";
export default {
  name: "main-footer",
  data() {
    return {
      appName: process.env.VUE_APP_NAME,
      customInfo: "",
      privacyInfo: "",
      manageInfo: "",
      shopliiInfo: "",
      guideList: [],
      paymentList: [],
      deliveryList: [],
      serviceList: [],
      dataList: {
        // customer: [],
        guide: [],
        payment: [],
        delivery: [],
        aftersale: [],
      },
    };
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      aboutList: (state) => {
        // 关于我们
        let list = [];
        if (state.config.config) {
          list = state.config.config.groupArticleListMap.CFG_GROUP_ABOUT;
        }
        return list;
      },
    }),
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      for (let key in this.dataList) {
        try {
          contentList({ position: key }).then((res) => {
            if (res.code == 200) {
              // 过滤customer
              if (key !== 'customer')
                this.dataList[key] = res.result;
            }
          });
        } catch (error) {
          console.error(`Error fetching ${this.dataList}:`, error);
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.footer {
  // position: absolute;
  // top: 0;
  // left: 0;
  // right: 0;
  // bottom: 0;
  z-index: 1;
  background: #000;
  padding: 0px 100px 50px;
  color: #CACACA;

  .container {
    min-width: 1200px;
    max-width: 1500px;
    margin: 0 auto;
  }

  .service {
    margin: 80px auto 64px;

    .service-left {
      display: flex;
      justify-content: space-between;

      .service-type {
        .title {
          color: #fff;
          font-size: 18px;
          font-weight: 500;
          margin-bottom: 30px;
        }

        .text {
          margin-bottom: 20px;
          // color: #adb8cc;
          color: #cacaca !important;
          font-size: 14px;
          cursor: pointer;

          &:hover {
            color: #fff !important;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .divline {
    height: 0.01rem;
    background: #2b303c;
    margin: 0 auto;
  }

  .company-info {
    margin: 32px auto 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      p {
        color: #F1F1F1;
        font-size: 14px;
      }
    }

    .right {
      .privacy-info {
        display: flex;

        .text,
        a {
          display: block;
          margin-right: 24px;
          color: #CACACA !important;
          font-size: 14px;
          cursor: pointer;

          &:hover {
            color: #FF186B;
          }
        }
      }
    }
  }

  .privacy-info {
    display: flex;

    .text,
    a {
      display: block;
      margin-right: 24px;
      color: #CACACA !important;
      font-size: 14px;
      cursor: pointer;

      &:hover {
        color: #FF186B !important;
      }
    }
  }

  .pay-list {
    display: block;
    height: 32px;
  }

  .copyright {
    background: #f5f5f5;
    padding: 8px;
    text-align: center;
    color: @t-text-color;
    font-size: 12px;

    .url {
      color: @t-text-color;
    }
  }

  .footer-logo {
    width: 200px;

    .logo {
      height: 60px;
      margin-bottom: 32px;

      .logo-img {
        height: 100%;
        display: block;
      }
    }

    .text {
      color: #fff;
      font-size: 20px;
    }
  }
}

@media screen and (max-width: 1400px) {
  .footer {
    padding: 0px 50px 50px;
  }

}
</style>
